<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background: #8A2BE2;
				opacity: 1;
				position: relative;
				top: 200px;
				left: 300px;
			}
		</style>
		<script src="../js/vue.js"></script>
	<link rel="stylesheet" href="Animate.css" />
	    
	    
	  	 
	</head>
	<body>
		<div id="app">
		<button @click="show=!show">切换动画</button>
		<transition enter-active-class="animate__animated animate__fadeInLeftBig  "  leave-active-class="animate__animated animate__backOutRight ">
		   <div class="box" v-show="show"></div>
		</transition>
		</div>	
	<script>
		
	var vm=new Vue({
		el:"#app",
		data:{
		 show:false	
		}
	})	
		
		
		
	</script>	
	</body>
</html>
